/<template>
  <div class="content">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item label="获取赠币时间">
        <BiDatePicker
          v-model="formData.viewTime"
          clearable
          style="width:280px;"
          size="small"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="onSearchChang"
        />
        <!-- :default-time="['00:00:00', '23:59:59']" -->
      </el-form-item>
      <el-form-item
        v-show="task_type==1"
        label="活动类型"
      >
        <el-select
          ref="select"
          v-model="formData.type"
          filterable
          multiple
          collapse-tags
          remote
          reserve-keyword
          placeholder="请选择"
          :remote-method="remoteMethod"
          size="small"
          clearable
          @focus="mobileClear"
          @hook:mounted="mobileClear"
          @visible-change="mobileClear"
          @change="onSearchChang"
        >
          <el-option
            v-for="item in optionsList.commonDataList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          > </el-option>
        </el-select>
        <!-- :default-time="['00:00:00', '23:59:59']" -->
      </el-form-item>

      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="margin-left:10px;"
          @click="startSearch('')"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-table">
      <el-tabs
        v-model="task_type"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="任务"
          name="1"
        ></el-tab-pane>
        <el-tab-pane
          label="签到"
          name="2"
        ></el-tab-pane>
        <el-tab-pane
          label="活动"
          name="3"
        ></el-tab-pane>
      </el-tabs>
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >
        <template v-slot:view_duration="{ row }">
          <div class="colorStatus">
            {{ row.view_duration }}s
          </div>
        </template>
      </BiTable>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { memberView } from '@/api/userPage'
import { commonData } from '@/api/common'
import { memberTask } from '@/api/active'
export default {
  props: ['rowInfo'],
  data() {
    return {
      task_type: '1',
      loading: false,
      formData: {
        viewTime: [],
        type: []
      },
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      optionsList: {
        commonDataList: []
      },
      tableData: [],
      tableColums: [
        {
          label: '类型',
          prop: 'type_title'
        },
        {
          label: '名称',
          prop: 'name',
          render: (h, { row }) => {
            if (this.task_type == 3) {
              return <span>{row.name}/{row.id}</span>
            } else {
              return <span>+{row.free_coin}赠币</span>
            }
          }
        },
        {
          label: '奖励时间',
          prop: 'create_time'
        },
        {
          label: '奖励内容',
          prop: 'free_coin',
          render: (h, { row }) => {
            if (this.task_type == 3) {
              return <span>+{row.coin_num}喵币</span>
            } else {
              return <span>+{row.free_coin}赠币</span>
            }
          }
        }
      ]
    }
  },
  mounted() {
    this.formData.viewTime = [moment().subtract(1, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
    this.startSearch()
    this.remoteMethod('')
  },
  methods: {
    handleClick() {
      this.onSearchChang()
      this.startSearch('')
    },
    onSearchChang() {
      this.page_info.page = 1
    },
    async remoteMethod(query) {
      const res = await commonData({
        type: 'taskType',
        value: query
      })
      if (res.status_code == 1) {
        this.optionsList.commonDataList = res.data.data
      }
    },
    // 执行这个重新获取焦点的方法 就可以了
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    async startSearch(msg) {
      const data = JSON.parse(JSON.stringify(this.formData))
      console.log(data)
      const params = {
        start_date: data.viewTime ? data.viewTime[0] : '',
        end_date: data.viewTime ? data.viewTime[1] : '',
        member_id: this.rowInfo.member_id,
        task_type: this.task_type,
        page: this.page_info.page,
        type: this.formData.type,
        page_size: this.page_info.page_size
      }
      this.loading = true
      const res = await memberTask(params)
      if (res.status_code === 1) {
        this.tableData = res.data.data
        if (this.task_type == 2) {
          this.tableData.map((item) => {
            item.type_title = '签到'
            item.name = '签到'
            item.join_date = item.signin_date
          })
        }
        this.page_info = res.data.page_info
        if (!msg) {
          this.$message.success(res.msg)
        }
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.startSearch('')
    }
  }
}
</script>

<style lang="scss" scoped>
.viewduration {
  display: flex;
  align-items: center;
}
</style>